const autoprefixer = require("autoprefixer");
const pxtoviewport = require("postcss-px-to-viewport");
const path = require("path");
const IS_PROD = ["production", "prod"].includes(process.env.NODE_ENV);
const CompressionWebpackPlugin = require("compression-webpack-plugin");
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;
function resolve(dir) {
  return path.join(__dirname, dir);
}
module.exports = {
  outputDir: "dist", // 输出文件目录
  assetsDir: "static",
  filenameHashing: true,
  lintOnSave: true, // eslint-loader 是否在保存的时候检查
  runtimeCompiler: false, // 是否使用包含运行时编译器的 Vue 构建版本
  publicPath: process.env.NODE_ENV === "production" ? "/" : "/", // 部署应用包时的基本 URL,用法和 webpack 本身的 output.publicPath 一致
  devServer: {
    open: true, //自动打开浏览器
    historyApiFallback: true, //异步路由缓存在页面中
    // hotOnly: true, // 启用热模块替换
    // https: false, // 启用https
    host: "0.0.0.0" // 允许外部ip访问
  },
  css: {
    extract: false, // 注：开启可能导致css样式不能热刷新，是否使用css分离插件 ExtractTextPlugin
    sourceMap: false, // 开启 CSS source maps
    loaderOptions: {
      postcss: {
        plugins: [
          autoprefixer(),
          pxtoviewport({
            viewportWidth: 375
          })
        ]
      }
    }
  },
  chainWebpack: config => {
    config.plugins.delete("prefetch"); // 移除 prefetch 插件
    config.resolve.symlinks(true); // 修复HMR(热刷新)
    config.resolve.alias // 修改文件的快捷方式
      .set("@", resolve("src"))
      .set("@c", resolve("src/components"))
      .set("@v", resolve("src/view"))
      .set("@a", resolve("src/assets"))
      .set("@u", resolve("src/utils"));
    if (IS_PROD) {
      config.module
        .rule("images")
        .use("image-webpack-loader")
        .loader("image-webpack-loader")
        .options({
          mozjpeg: { progressive: true, quality: 65 },
          optipng: { enabled: false },
          pngquant: { quality: [0.65, 0.9], speed: 4 },
          gifsicle: { interlaced: false }
          // webp: { quality: 75 }
        });
    }
  },
  configureWebpack: config => {
    if (IS_PROD) {
      const plugins = [];
      plugins.push(
        new CompressionWebpackPlugin({
          //开启gzip
          filename: "[path].gz[query]",
          algorithm: "gzip",
          test: productionGzipExtensions,
          threshold: 10240,
          minRatio: 0.8
        })
      );
      config.plugins = [...config.plugins, ...plugins];
    }
  },
  productionSourceMap: false // 生产环境是否生成 sourceMap 文件;map文件的作用在于：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。
};
